<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="130px">
				<el-form-item label="支付方式">
					<el-select
						class="w-60"
						v-model="queryParams.pay_type"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" value/>
						<el-option label="对公支付" :value="3"/>
						<el-option label="支付宝" :value="2"/>
                        <el-option label="微信" :value="1"/>
						<el-option label="钱包" :value="4"/>
					</el-select>
				</el-form-item>
                <el-form-item label="支付状态">
					<el-select
						class="w-60"
						v-model="queryParams.pay_status"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" value/>
						<el-option label="待支付" :value="1"/>
						<!-- <el-option label="支付中" :value="2"/> -->
						<el-option label="等待确认（对公）" :value="3"/>
                        <el-option label="支付成功" :value="4"/>
                        <el-option label="支付失败" :value="5"/>
					</el-select>
				</el-form-item>
                <el-form-item label="创建时间" class="piker">
					<!-- <el-date-picker
						v-model="queryParams.end_time"
						type="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						placeholder="请选择日期"
					/> -->
					<daterange-picker v-model:startTime="queryParams.start_time" v-model:endTime="queryParams.end_time" />
				</el-form-item>
				<el-form-item label="单号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.sn"
						clearable
					/>
				</el-form-item>
                <el-form-item label="关联业务单号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.c_sn"
						clearable
					/>
				</el-form-item>
				<el-form-item label="分账状态">
					<el-select
						class="w-60"
						v-model="queryParams.is_separate"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" value/>
						<el-option label="是" :value="1"/>
						<el-option label="否" :value="0"/>
					</el-select>
				</el-form-item>
				<el-form-item label="款项类型">
					<el-select
						class="w-60"
						v-model="queryParams.type"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" value/>
						<el-option label="渠道费" :value="1"/>
						<el-option label="转介费" :value="2"/>
						<el-option label="平台服务费" :value="2"/>
						<el-option label="定金" :value="3"/>
					</el-select>
				</el-form-item>
				<el-form-item class="w-80">
                    <el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
			</el-card>
		<el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="80" />
				<el-table-column label="单号" prop="sn" min-width="160" />
				<el-table-column label="款项类型" prop="type" min-width="160">
					<template #default="{ row }">
						<span v-if="row.type == 1">渠道费</span>
						<span v-if="row.type == 2">转介费、平台服务费</span>
						<span v-if="row.type == 3">定金</span>
					</template>
				</el-table-column>
                <el-table-column label="总金额（元）" prop="actual_money" min-width="120" />
                <el-table-column label="创建时间" prop="create_time" min-width="180" />
                <el-table-column label="付款人" prop="u_real_name" min-width="180" >
					<template #default="{ row }">
						<span v-if="row.mode == 1">{{ row.u_real_name }}</span>
						<span v-else>{{ row.ce_real_name }}</span>
					</template>
				</el-table-column>
                <el-table-column label="手机号" prop="u_mobile" min-width="130" >
					<template #default="{ row }">
						<span v-if="row.mode == 1">{{ row.u_mobile }}</span>
						<span v-else>{{ row.ce_mobile }}</span>
					</template>
				</el-table-column>
				<el-table-column label="抵扣金额（元）" prop="deduction_price" min-width="180" />
				<el-table-column label="实付金额（元）" prop="after_folding_price" min-width="180" >
					<template #default="{ row }">
						<span>{{ (Number(row.after_folding_price) + Number(row.use_money)).toFixed(2) }}</span>
					</template>
				</el-table-column>
                <el-table-column label="支付状态" prop="pay_status" min-width="160">
					<template #default="{ row }">
						<span>{{ payTxt(row.pay_status) }}</span>
					</template>
				</el-table-column>
                <el-table-column label="支付方式" prop="name" min-width="160">
					<template #default="{ row }">
						<span v-if="row.pay_type == 4 || row.use_money > 0" class="mr-4">钱包</span>
						<span v-if="row.pay_type == 1">微信</span>
						<span v-else-if="row.pay_type == 2">支付宝</span>
						<span v-else-if="row.pay_type == 3">对公支付</span>
						<span v-if="row.pay_type == 0">-</span>
					</template>
				</el-table-column>
                <el-table-column label="支付流水号" prop="transaction_id" min-width="260" >
					<template #default="{ row }">
						<span>{{ row.transaction_id?row.transaction_id:'-' }}</span>
					</template>
				</el-table-column>
                <el-table-column label="支付时间" prop="pay_time" min-width="180" >
					<template #default="{ row }">
						<span>{{ row.pay_time?row.pay_time:'-' }}</span>
					</template>
				</el-table-column>
                <el-table-column label="关联业务单号" prop="c_sn" min-width="170" >
					<template #default="{ row }">
						<el-link type="primary" @click="() => {
							$router.push({ path: getRoutePath('cooperation.cooperation/detail'), query: { id: row.cooperation_id } })
						}">{{ row.c_sn }}</el-link>
					</template>
				</el-table-column>
                <el-table-column label="分账状态" prop="is_separate" min-width="120">
					<template #default="{ row }">
						<span v-if="row.is_separate == 1">是</span>
						<span v-if="row.is_separate == 0">否</span>
					</template>
				</el-table-column>
                <el-table-column label="操作" prop="name" min-width="120" fixed="right">
                    <template #default="{ row }">
                        <!-- <el-button v-if="row.pay_status == 3" v-perms="['seat.seatOrder/authOrder']" type="primary" link @click="handleSure(row)">到账确认</el-button> -->
						<router-link
							v-perms="['setting.pay.payConfig/commissionOrderDetail']"
							:to="{ path: getRoutePath('setting.pay.payConfig/commissionOrderDetail'), query: { id: row.id } }"
						>
							<el-link v-perms="['setting.pay.payConfig/commissionOrderDetail']" type="primary" :underline="false">详情</el-link>
						</router-link>
                    </template>
					
                </el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
            <el-dialog
                v-model="showCompany"
                title="到账确认"
                width="500"
            >
                <div class="flex">
                    <el-icon size="20" color="#E6A23C"><Warning /></el-icon>
                    <div>请认真核对银行流水，确认租金是否已到账</div>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="showCompany = false">取消</el-button>
                        <el-button type="danger" v-perms="['setting.pay.payConfig/unPay']" @click="notReceived">未到账</el-button>
                        <el-button type="primary" v-perms="['setting.pay.payConfig/paid']" @click="alreadyReceived">已到账</el-button>
                    </div>
                </template>
            </el-dialog>
		</el-card>
		<pay v-model:show="checkState.show" @confirm="handlePaidConfirm"></pay>
	</div>
</template>
<script lang="ts" setup name="commissionOrderlists">
	import { commissionOrderlists, unPay, paid } from '@/api/finance';
	import { usePaging } from '@/hooks/usePaging';
	import pay from '../receipt/pay.vue';
	import feedback from '@/utils/feedback';
	import {getRoutePath} from '@/router';
	const route = useRoute()
	const queryParams:any = reactive({
		pay_type: '',
		pay_status: '',
		start_time: '',
		end_time: '',
		sn: '',
		c_sn: '',
		is_separate: '',
		type: ''
	})
	const checkState = reactive({
		show: false
	})
	// 支付状态文字转化
	const payTxt = (num:any) => {
		return computed(():string=>{
			let txt = '';
			switch(num) {
				case 1: txt = '待支付';break;
				case 2: txt = '支付中';break;
				case 3: txt = '等待确认（对公）';break;
				case 4: txt = '支付成功 ';break;
				case 5: txt = '支付失败 ';break;
				case 6: txt = '已作废 ';break;
			}
			return txt;
		})
	}
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: commissionOrderlists,
		params: queryParams
	})
    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
    const showCompany = ref(false)
    const orderInfo:any = ref({})
    const handleSure = async (id : number) => {
		showCompany.value = true;
		orderInfo.value = id;
		// await feedback.confirm('确认对公转账？')
		// try{
		// 	await authOrder({ id })
		// 	getLists();
		// }catch(e){
		// 	//TODO handle the exception
		// }
	}
	//未到账
	const notReceived = async () => {
		try{
			showCompany.value = false;
			await feedback.confirm('确认未到账之后单据状态将变“支付失败”且不可更改，请认真核对银行流水，及时与付款人进行联系确认，谨慎操作。是否继续确认未到账？','未到账','none');
			await unPay({ id: orderInfo.value.id })
			getLists();
		}catch(error){
			console.log(error)
		}
	}
	//已到账
	const alreadyReceived = () => {
		showCompany.value = false;
		checkState.show = true;
	}
	const handlePaidConfirm = async (value : any) => {
		await paid({ 
			id: orderInfo.value.id, 
			send_pay_name: value.send_pay_name, 
			send_pay_account: value.send_pay_account, 
			pay_time: value.pay_time 
		});
		showCompany.value = false;
		checkState.show = false;
		getLists();
	}
	if (route.query.sn) {
		queryParams.sn = route.query.sn
	}
	getLists()
</script>
<style lang="scss" scoped>
.piker{
    width: 370px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}
</style>